<template>
  <div class="country-select-form">
    <h3 class="section-title">国籍与地区</h3>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="国籍" prop="nationality" required>
          <el-select 
            v-model="formData.nationality" 
            placeholder="请选择国籍"
            style="width: 100%"
            clearable
            @focus="loadNationalities"
            :loading="loading"
          >
            <el-option
              v-for="country in nationalityOptions"
              :key="country.value"
              :label="country.label"
              :value="country.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="当前所在国家" prop="currentLocation" required>
          <el-cascader
            v-model="formData.currentLocation"
            :options="locationOptions"
            :props="cascaderProps"
            placeholder="请选择国家/城市"
            style="width: 100%"
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { studentApi } from '@/api'

export default {
  name: 'CountrySelect',
  props: {
    modelValue: {
      type: Object,
      default: () => ({
        nationality: '',
        currentLocation: []
      })
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      formData: { ...this.modelValue },
      loading: false,
      cascaderProps: {
        expandTrigger: 'hover',
        value: 'value',
        label: 'label',
        children: 'children'
      },
      nationalityOptions: [],
      locationOptions: [
        {
          value: 'China',
          label: '中国',
          children: [
            { value: 'Beijing', label: '北京' },
            { value: 'Shanghai', label: '上海' },
            { value: 'Guangzhou', label: '广州' },
            { value: 'Shenzhen', label: '深圳' },
            { value: 'Hangzhou', label: '杭州' },
            { value: 'Nanjing', label: '南京' },
            { value: 'Wuhan', label: '武汉' },
            { value: 'Chengdu', label: '成都' },
            { value: 'XiAn', label: '西安' },
            { value: 'Tianjin', label: '天津' },
            { value: 'Chongqing', label: '重庆' },
            { value: 'Qingdao', label: '青岛' },
            { value: 'Dalian', label: '大连' },
            { value: 'Xiamen', label: '厦门' },
            { value: 'Suzhou', label: '苏州' },
            { value: 'Other', label: '其他' }
          ]
        },
        {
          value: 'USA',
          label: '美国',
          children: [
            { value: 'NewYork', label: '纽约' },
            { value: 'LosAngeles', label: '洛杉矶' },
            { value: 'Chicago', label: '芝加哥' },
            { value: 'Houston', label: '休斯顿' },
            { value: 'Phoenix', label: '凤凰城' },
            { value: 'Philadelphia', label: '费城' },
            { value: 'SanAntonio', label: '圣安东尼奥' },
            { value: 'SanDiego', label: '圣地亚哥' },
            { value: 'Dallas', label: '达拉斯' },
            { value: 'SanJose', label: '圣何塞' },
            { value: 'Other', label: '其他' }
          ]
        },
        {
          value: 'UK',
          label: '英国',
          children: [
            { value: 'London', label: '伦敦' },
            { value: 'Manchester', label: '曼彻斯特' },
            { value: 'Birmingham', label: '伯明翰' },
            { value: 'Leeds', label: '利兹' },
            { value: 'Liverpool', label: '利物浦' },
            { value: 'Sheffield', label: '谢菲尔德' },
            { value: 'Edinburgh', label: '爱丁堡' },
            { value: 'Bristol', label: '布里斯托' },
            { value: 'Other', label: '其他' }
          ]
        },
        {
          value: 'Canada',
          label: '加拿大',
          children: [
            { value: 'Toronto', label: '多伦多' },
            { value: 'Montreal', label: '蒙特利尔' },
            { value: 'Vancouver', label: '温哥华' },
            { value: 'Calgary', label: '卡尔加里' },
            { value: 'Edmonton', label: '埃德蒙顿' },
            { value: 'Ottawa', label: '渥太华' },
            { value: 'Winnipeg', label: '温尼伯' },
            { value: 'Other', label: '其他' }
          ]
        },
        {
          value: 'Australia',
          label: '澳大利亚',
          children: [
            { value: 'Sydney', label: '悉尼' },
            { value: 'Melbourne', label: '墨尔本' },
            { value: 'Brisbane', label: '布里斯班' },
            { value: 'Perth', label: '珀斯' },
            { value: 'Adelaide', label: '阿德莱德' },
            { value: 'Canberra', label: '堪培拉' },
            { value: 'Other', label: '其他' }
          ]
        },
        {
          value: 'Japan',
          label: '日本',
          children: [
            { value: 'Tokyo', label: '东京' },
            { value: 'Osaka', label: '大阪' },
            { value: 'Kyoto', label: '京都' },
            { value: 'Yokohama', label: '横滨' },
            { value: 'Nagoya', label: '名古屋' },
            { value: 'Sapporo', label: '札幌' },
            { value: 'Kobe', label: '神户' },
            { value: 'Other', label: '其他' }
          ]
        },
        {
          value: 'Other',
          label: '其他',
          children: [
            { value: 'OtherCity', label: '其他城市' }
          ]
        }
      ]
    }
  },
  methods: {
    async loadNationalities() {
      // 如果已经加载过，就不再重复加载
      if (this.nationalityOptions.length > 0) {
        return
      }
      
      this.loading = true
      try {
        const response = await studentApi.getNationalities()
        
        if (response.code === 'SUCCESS' && response.data && Array.isArray(response.data)) {
          // 使用返回数据中的label字段作为下拉选项
          this.nationalityOptions = response.data.map(item => ({
            value: item.value,
            label: item.label
          }))
        } else {
          // 如果接口失败，使用默认国籍列表
          this.nationalityOptions = [
            { value: 1, label: '中国' },
            { value: 2, label: '美国' },
            { value: 3, label: '英国' },
            { value: 4, label: '加拿大' },
            { value: 5, label: '澳大利亚' },
            { value: 6, label: '日本' },
            { value: 7, label: '韩国' },
            { value: 8, label: '德国' },
            { value: 9, label: '法国' },
            { value: 10, label: '新加坡' },
            { value: 11, label: '马来西亚' },
            { value: 12, label: '泰国' },
            { value: 13, label: '越南' },
            { value: 14, label: '印度' },
            { value: 15, label: '俄罗斯' },
            { value: 16, label: '其他' }
          ]
        }
      } catch (error) {
        // 如果接口失败，使用默认国籍列表
        this.nationalityOptions = [
          { value: 1, label: '中国' },
          { value: 2, label: '美国' },
          { value: 3, label: '英国' },
          { value: 4, label: '加拿大' },
          { value: 5, label: '澳大利亚' },
          { value: 6, label: '日本' },
          { value: 7, label: '韩国' },
          { value: 8, label: '德国' },
          { value: 9, label: '法国' },
          { value: 10, label: '新加坡' },
          { value: 11, label: '马来西亚' },
          { value: 12, label: '泰国' },
          { value: 13, label: '越南' },
          { value: 14, label: '印度' },
          { value: 15, label: '俄罗斯' },
          { value: 16, label: '其他' }
        ]
      } finally {
        this.loading = false
      }
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.formData = { ...newVal }
      },
      deep: true
    },
    formData: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal)
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.country-select-form {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
}
</style> 